<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />
    <!-- 数据列表展示 -->
    <van-list v-if="cartlist.length > 0">
      <van-swipe-cell>
        <van-card
          v-for="item in cartlist"
          :key="item.id"
          :num="item.num"
          :price="item.price | toPrice"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$imgUrl + item.img"
        >
          <template #footer>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </van-list>
    <!-- 数据列表的展示 -->
    <van-list v-else>
      <van-empty description="购物车啥也没有，快去包场！" />
    </van-list>
    <!-- 提交栏 -->
    <van-submit-bar
      v-for="item in cartlist"
      :key="item.id"
      :price="item.price*100"
      button-text="提交订单"
      @submit="onSubmit"

    >
      <van-checkbox v-model="allCheck">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
//引入dialog函数
import { Dialog } from "vant";
// 引入购物车接口
import { getCartList, getCartEdit, getCartDelete } from "../util/axios";
export default {
  data() {
    return {
      cartlist: [],
      allCheck: false,
    };
  },
  mounted() {
    //触发购物车列表获取
    this.getCartList();
  },
  methods: {
    //封装一个获取购物车列表的事件
   async getCartList() {
   let res =     this.cartlist = await getCartList({
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
      });

      console.log(res);
    },
    onSubmit() {},
  },
  beforeRouteEnter(to, from, next) {
    //判断当前操作者是否登录
    if (sessionStorage.getItem("user")) {
      next();
    } else {
      //调用消息确认框
      Dialog.confirm({
        title: "未登录",
        message: "当前未登录，赶快去登录！！！",
      })
        .then(() => {
          next("/login");
        })
        .catch(() => {});
    }
  },
};
</script>

<style scoped>
.van-button {
  height: 100%;
}
.b {
  height: 80%;
}
</style>
